<script setup>
import MailIcon from './icons/MailIcon.vue'
import Button from './Button.vue'
</script>

<template>
  <form action="/thank-you" class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
    <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
      <MailIcon class="h-6 w-6 flex-none" />
      <span class="ml-3">订阅更新</span>
    </h2>
    <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
      有新内容发布时我会通知您，您也可以随时取消订阅。
    </p>
    <div class="mt-6 flex items-center">
      <span class="flex min-w-0 flex-auto p-px">
        <input
          type="email"
          placeholder="邮箱地址"
          aria-label="邮箱地址"
          required
          class="w-full appearance-none rounded-md bg-white px-3 py-2 shadow-sm ring-1 ring-zinc-900/10 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm dark:bg-zinc-800/50 dark:text-zinc-100 dark:ring-white/10 dark:placeholder:text-zinc-500 dark:focus:ring-primary-400"
        />
      </span>
      <Button type="submit" class="ml-4 flex-none">
        订阅
      </Button>
    </div>
  </form>
</template>
